<template>
  <div class="update-ai-container pb-7 mx-auto px-4 max-w-7xl">
    <div class="breadcrumbs space-x-2 text-base mx-auto flex flex-wrap items-center tool-dom py-5 space-x-3">
      <common-link path="/"
        class="text-gray-1000 hover:text-purple-1200 go-home">
        {{$t('home')}}
      </common-link>
      <svg-icon className="text-gray-1800 text-mini text-slate-400 w-2.5 h-2.5"
        :isDiv="true"
        iconName='right_outlined'></svg-icon>
      <common-link path="/user?tab=updateAi"
        class="text-gray-1000 hover:text-purple-1200 go-category">
        {{$t('update_update')}}
      </common-link>
      <svg-icon className="text-gray-1800 text-mini text-slate-400 w-2.5 h-2.5"
        :isDiv="true"
        iconName='right_outlined'></svg-icon>
      <span class="text-gray-1400 text-base">
        {{$t('update_updateTool')}}
      </span>
    </div>
    <div class="update-ai-box">
      <el-form :model="form"
        label-position="top"
        status-icon
        :rules="rules"
        ref="form"
        size="medium"
        label-width="100px"
        class="mt-6"
        :class="{'skeleton':loading}">
        <div class="box-shadow rounded-md px-4 py-5 sm:p-7 bg-white">
          <h3 class="text-2xl font-semibold text-gray-1000">
            {{$t('update_updateTool')}}
          </h3>
          <p class="text-base text-gray-1500 mt-1 mb-3">
            {{$t('update_selectTheToolYouNeed')}}
          </p>

          <el-row :gutter="20"
            class="mb-0">
            <el-col :lg="24">
              <el-form-item label=""
                class="mb-0"
                required="required"
                prop="handle">
                <virtual-select v-model="form.handle"
                  :list="toolsList"
                  label="n"
                  value="h"
                  concatKey="w"
                  :placeholder="$t('update_selectTheTool')"
                  :keeps-params="10"
                  :is-concat="true"
                  :concat-symbol="' || '"
                  :is-multiple="false"
                  :disabled="isEdit ? false : true"
                  :allow-create="false"
                  class="sizeMax" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <div class="box-shadow rounded-md px-4 py-5 sm:p-7 bg-white mt-5"
          :class="{'disabled group': isEdit && !hasRealVal(form.handle)}">
          <div :class="{'skeleton':tLoading && !loading}">
            <el-row :gutter="20"
              class="mb-3 sm:mb-6">
              <el-col :lg="12">
                <el-form-item prop="ai_content.website_name">
                  <template v-slot:label
                    class="w-full">
                    <div class="sm:flex items-center justify-between gap-4 flex-1 w-0 flex-wrap space-y-2 sm:space-y-0 mb-2 sm:mb-0">
                      <div class="sm:flex-1 sm:w-0">
                        <span class="text-lg font-semibold text-grayp-1000">{{$t('update_toolName')}}</span>
                      </div>
                      <el-popover placement="top"
                        :trigger="_isMobile() ? 'click':'hover'">
                        <div class="example-box">
                          <img src="@/static/images/example/example01.webp"
                            alt=""
                            srcset="">
                        </div>
                        <div class="inline-flex items-center gap-0.5 cursor-pointer example"
                          slot="reference">
                          <svg-icon className="w-3 h-3"
                            :isDiv="true"
                            iconName='example'></svg-icon>
                          <span class="text-sm text-purple-1300 underline">{{$t('update_example')}}</span>
                        </div>
                      </el-popover>
                    </div>
                  </template>
                  <el-input v-model="form.ai_content.website_name"
                    :readonly="!isEdit || !hasRealVal(form.handle)"
                    :class="{'cursor-not-allowed': !hasRealVal(form.handle)}"
                    :placeholder="isEdit ? (!hasRealVal(form.handle) ? $t('update_selectAToolFirst') : $t('update_placeholder_toolName')) : ''"></el-input>
                </el-form-item>
              </el-col>
              <el-col :lg="12">
                <el-form-item>
                  <template v-slot:label>
                    <span class="text-lg font-semibold text-grayp-1000">{{$t('update_website')}}</span>
                  </template>
                  <el-input v-model="website"
                    :readonly="!isEdit || !hasRealVal(form.handle)"
                    disabled
                    :placeholder="isEdit ? (!hasRealVal(form.handle) ? $t('update_selectAToolFirst') :  $t('update_pleaseEnter')) : ''"></el-input>
                  <p class="text-md text-red-1000 leading-5 mt-3"
                    v-if="isEdit">{{$t('update_cantChangeTheWebsite')}}</p>
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item prop="ai_content.what_is_summary"
              class="mb-8 sm:mb-14">
              <template v-slot:label
                class="w-full">
                <div class="sm:flex items-center justify-between gap-4 flex-1 w-0 flex-wrap space-y-2 sm:space-y-0 mb-2 sm:mb-0">
                  <div class="sm:flex-1 sm:w-0 flex items-center flex-wrap space-y-2 sm:space-y-0">
                    <span class="text-lg font-semibold text-grayp-1000 mr-6">
                      {{$t('update_introduction')}}</span>
                    <em class="text-md text-grayp-3400 not-italic"
                      v-if="isEdit">{{$t('update_ifLeftBlank')}}</em>
                  </div>
                  <el-popover placement="top"
                    :trigger="_isMobile() ? 'click':'hover'">
                    <div class="example-box">
                      <img src="@/static/images/example/example02.webp"
                        alt=""
                        srcset="">
                    </div>
                    <div class="inline-flex items-center gap-0.5 cursor-pointer example"
                      slot="reference">
                      <svg-icon className="w-3 h-3"
                        :isDiv="true"
                        iconName='example'></svg-icon>
                      <span class="text-sm text-purple-1300 underline">{{$t('update_example')}}</span>
                    </div>
                  </el-popover>
                </div>
              </template>
              <el-input v-model="form.ai_content.what_is_summary"
                :readonly="!isEdit || !hasRealVal(form.handle)"
                :class="{'cursor-not-allowed': !hasRealVal(form.handle)}"
                :placeholder="isEdit ? (!hasRealVal(form.handle) ? $t('update_selectAToolFirst') :  $t('update_placeholder_introduction')) : ''"></el-input>
            </el-form-item>

            <el-form-item prop="ai_content.what_is"
              class="mb-8 sm:mb-14">
              <template v-slot:label
                class="w-full">
                <div class="sm:flex items-center justify-between gap-4 flex-1 w-0 flex-wrap space-y-2 sm:space-y-0 mb-3 sm:mb-0 gap-y-3">
                  <div class="sm:flex-1 sm:w-0 flex items-center flex-wrap space-y-2 sm:space-y-0 gap-x-6 gap-y-2 sm:gap-y-3">
                    <span class="text-lg font-semibold text-grayp-1000">
                      {{$t('update_toolDescription')}}</span>
                    <em class="text-md text-grayp-3400 not-italic"
                      v-if="isEdit">{{$t('update_ifLeftBlank')}}</em>
                  </div>
                  <el-popover placement="top"
                    :trigger="_isMobile() ? 'click':'hover'">
                    <div class="example-box">
                      <img src="@/static/images/example/example08.webp"
                        alt=""
                        srcset="">
                    </div>
                    <div class="inline-flex items-center gap-0.5 cursor-pointer example"
                      slot="reference">
                      <svg-icon className="w-3 h-3"
                        :isDiv="true"
                        iconName='example'></svg-icon>
                      <span class="text-sm text-purple-1300 underline">{{$t('update_example')}}</span>
                    </div>
                  </el-popover>
                </div>
              </template>
              <el-input v-model="form.ai_content.what_is"
                :readonly="!isEdit || !hasRealVal(form.handle)"
                rows="4"
                type="textarea"
                :autosize="false"
                :class="{'cursor-not-allowed': !hasRealVal(form.handle)}"
                :placeholder="isEdit ? (!hasRealVal(form.handle) ? $t('update_selectAToolFirst') : $t('update_placeholder_toolDescription')) : ''"></el-input>
            </el-form-item>

            <el-form-item prop="categories_score"
              class="categories_score mb-8 sm:mb-14">
              <template v-slot:label
                class="w-full">
                <div class="sm:flex items-center justify-between gap-4 flex-1 w-0 flex-wrap space-y-2 sm:space-y-0 mb-3 sm:mb-0 gap-y-3">
                  <div class="sm:flex-1 sm:w-0 flex items-center flex-wrap space-y-2 sm:space-y-0 gap-x-6 gap-y-2 sm:gap-y-3">
                    <span class="text-lg font-semibold text-grayp-1000">
                      {{$t('update_category')}}</span>
                    <!-- <div class="inline-flex bg-purple-1300 text-white justify-center rounded py-2 px-4 sm:px-6 hover:opacity-90 focus:opacity-90 cursor-pointer"
                  @click="toSelectCategory()">{{$t('update_select')}}</div> -->

                    <el-button type="primary"
                      :disabled="loading || saveLoading || !form.handle"
                      @click="toSelectCategory()"
                      v-if="isEdit">{{$t('update_select')}}</el-button>
                  </div>
                  <div class="inline-flex items-center gap-0.5"
                    v-if="isEdit">
                    <span class="text-sm text-purple-1300">{{$t('update_theScoreCan')}}</span>
                  </div>
                </div>
              </template>
              <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-3 mt-5 categories_score"
                v-if="form.categories_score && form.categories_score.length > 0">
                <div class="border border-gray-1600 px-3.5 py-1.5 rounded flex items-center gap-3"
                  v-for="(item, key) in form.categories_score"
                  :key="item.id">
                  <div class="block text-lg text-gray-1000 flex-1 w-0 truncate">
                    {{form.categories_score[key].id | filterCategory(categoriesList)}}
                  </div>
                  <el-input-number v-model="form.categories_score[key].score"
                    v-if="isEdit"
                    :min="0.1"
                    :max="1"
                    :step="0.1"
                    :precision="1"
                    :step-strictly="true"
                    :controls="false"
                    class="w-28 flex-shrink-0"></el-input-number>
                  <el-input v-model="form.categories_score[key].score"
                    readonly
                    v-else
                    class="w-28 flex-shrink-0"></el-input>
                  <div @click="del('categories_score', key)"
                    :class="{'cursor-not-allowed': !hasRealVal(form.handle)}"
                    v-if="isEdit"
                    class="w-4 flex-shrink-0 text-gray-1500 cursor-pointer hover:text-purple-1300">
                    <svg-icon className="w-4 h-4"
                      :isDiv="true"
                      iconName='close2'></svg-icon>
                  </div>
                </div>
              </div>
              <el-empty :image-size="100"
                class="py-0 mt-2"
                v-else
                :description="isEdit ? (!hasRealVal(form.handle) ? $t('update_selectAToolFirst') : $t('update_noCategory')) : $t('update_noCategoryNoEdit')"></el-empty>
            </el-form-item>

            <el-form-item prop="ai_content.how_to_use"
              class="mb-8 sm:mb-14">
              <template v-slot:label
                class="w-full">
                <div class="sm:flex items-center justify-between gap-4 flex-1 w-0 flex-wrap space-y-2 sm:space-y-0 mb-3 sm:mb-0 gap-y-3">
                  <div class="sm:flex-1 sm:w-0 flex items-center flex-wrap space-y-2 sm:space-y-0 gap-x-6 gap-y-2 sm:gap-y-3">
                    <span class="text-lg font-semibold text-grayp-1000">
                      {{$t('update_howToUse')}}</span>
                    <em class="text-md text-grayp-3400 not-italic"
                      v-if="isEdit">{{$t('update_ifLeftBlank')}}</em>
                  </div>
                  <el-popover placement="top"
                    :trigger="_isMobile() ? 'click':'hover'">
                    <div class="example-box">
                      <img src="@/static/images/example/example03.webp"
                        alt=""
                        srcset="">
                    </div>
                    <div class="inline-flex items-center gap-0.5 cursor-pointer example"
                      slot="reference">
                      <svg-icon className="w-3 h-3"
                        :isDiv="true"
                        iconName='example'></svg-icon>
                      <span class="text-sm text-purple-1300 underline">{{$t('update_example')}}</span>
                    </div>
                  </el-popover>
                </div>
              </template>
              <el-input v-model="form.ai_content.how_to_use"
                :readonly="!isEdit || !hasRealVal(form.handle)"
                rows="4"
                type="textarea"
                :autosize="false"
                :class="{'cursor-not-allowed': !hasRealVal(form.handle)}"
                :placeholder="isEdit ? (!hasRealVal(form.handle) ? $t('update_selectAToolFirst') : $t('update_placeholder_howToUse')) : ''"></el-input>
            </el-form-item>

            <el-form-item prop="ai_content.core_features"
              class="mb-8 sm:mb-14">
              <template v-slot:label
                class="w-full">
                <div class="sm:flex items-center justify-between gap-4 flex-1 w-0 flex-wrap space-y-2 sm:space-y-0 mb-3 sm:mb-0 gap-y-3">
                  <div class="sm:flex-1 sm:w-0 flex items-center flex-wrap space-y-2 sm:space-y-0 gap-x-6 gap-y-2 sm:gap-y-3">
                    <span class="text-lg font-semibold text-grayp-1000">
                      {{$t('update_coreFeatures')}}</span>
                    <em class="text-md text-grayp-3400 not-italic"
                      v-if="isEdit">{{$t('update_ifLeftBlank')}}</em>
                  </div>
                  <el-popover placement="top"
                    :trigger="_isMobile() ? 'click':'hover'">
                    <div class="example-box">
                      <img src="@/static/images/example/example04.webp"
                        alt=""
                        srcset="">
                    </div>
                    <div class="inline-flex items-center gap-0.5 cursor-pointer example"
                      slot="reference">
                      <svg-icon className="w-3 h-3"
                        :isDiv="true"
                        iconName='example'></svg-icon>
                      <span class="text-sm text-purple-1300 underline">{{$t('update_example')}}</span>
                    </div>
                  </el-popover>
                </div>
              </template>
              <div class="mt-3 space-y-4 sm:space-y-3">
                <div class="flex items-center gap-3 flex-wrap"
                  v-for="(item, key) in form.ai_content.core_features"
                  :key="key">
                  <div class="flex items-center flex-1 gap-5 flex-wrap w-full sm:w-auto">
                    <el-input v-model="form.ai_content.core_features[key]"
                      :readonly="!isEdit || !hasRealVal(form.handle)"
                      :class="{'cursor-not-allowed': !hasRealVal(form.handle)}"
                      :placeholder="isEdit ? (!hasRealVal(form.handle) ? $t('update_selectAToolFirst') : $t('update_placeholder_coreFeatures')) : ''"
                      class="sm:flex-1 w-full sm:w-auto"></el-input>
                  </div>
                  <div @click="del('core_features', key)"
                    v-if="isEdit"
                    class="flex-shrink-0 flex items-center justify-center w-full sm:w-9 h-9 border border-gray-1600 rounded text-gray-1000 cursor-pointer btn"
                    :class="{'hover:border-purple-2500 hover:bg-purple-2600 hover:text-purple-1300': hasRealVal(form.handle), 'cursor-not-allowed': !hasRealVal(form.handle)}">
                    <svg-icon className="w-3.5 h-3.5"
                      :isDiv="true"
                      iconName='delete_default'></svg-icon>
                  </div>
                </div>
                <div class="flex items-center gap-3 flex-wrap"
                  v-if="isEdit">
                  <div class="flex items-center flex-1 gap-5 flex-wrap w-full sm:w-auto">
                    <div class="flex-1 h-9 border border-gray-1600 rounded text-gray-1000 cursor-pointer btn"
                      :class="{'hover:text-purple-1300 hover:border-purple-2500 hover:bg-purple-2600': hasRealVal(form.handle)}">
                      <div class="flex items-center justify-center sm:justify-start gap-1.5 px-3 h-full"
                        :class="{'cursor-not-allowed': !hasRealVal(form.handle)}"
                        @click="addItem('core_features')">
                        <svg-icon className="w-3.5 h-3.5 text-purple-1300"
                          :isDiv="true"
                          iconName='add'></svg-icon>
                        <span class="text-base">{{$t('update_add')}}</span>
                      </div>
                    </div>
                    <div class="flex-1 hidden sm:block sm:w-auto h-9 opacity-0">
                    </div>
                    <div class="flex-1 hidden sm:block sm:w-auto h-9 opacity-0">
                    </div>
                  </div>
                  <div class="flex-shrink-0 hidden sm:block sm:w-9 h-9 opacity-0">
                  </div>
                </div>

                <el-empty :image-size="100"
                  class="py-0 mt-2"
                  v-if="!isEdit && (!hasRealVal(form.ai_content.core_features) || !Array.isArray(form.ai_content.core_features) || (Array.isArray(form.ai_content.core_features) && form.ai_content.core_features.length === 0))"
                  :description="$t('noResult')"></el-empty>
              </div>
            </el-form-item>

            <el-form-item prop="ai_content.use_cases"
              class="mb-8 sm:mb-14">
              <template v-slot:label
                class="w-full">
                <div class="sm:flex items-center justify-between gap-4 flex-1 w-0 flex-wrap space-y-2 sm:space-y-0 mb-3 sm:mb-0 gap-y-3">
                  <div class="sm:flex-1 sm:w-0 flex items-center flex-wrap space-y-2 sm:space-y-0 gap-x-6 gap-y-2 sm:gap-y-3">
                    <span class="text-lg font-semibold text-grayp-1000">
                      {{$t('update_useCases')}}</span>
                    <em class="text-md text-grayp-3400 not-italic"
                      v-if="isEdit">{{$t('update_ifLeftBlank')}}</em>
                  </div>
                  <el-popover placement="top"
                    :trigger="_isMobile() ? 'click':'hover'">
                    <div class="example-box">
                      <img src="@/static/images/example/example05.webp"
                        alt=""
                        srcset="">
                    </div>
                    <div class="inline-flex items-center gap-0.5 cursor-pointer example"
                      slot="reference">
                      <svg-icon className="w-3 h-3"
                        :isDiv="true"
                        iconName='example'></svg-icon>
                      <span class="text-sm text-purple-1300 underline">{{$t('update_example')}}</span>
                    </div>
                  </el-popover>
                </div>
              </template>
              <div class="mt-3 space-y-4 sm:space-y-3">
                <div class="flex items-center gap-3 flex-wrap"
                  v-for="(item, key) in form.ai_content.use_cases"
                  :key="key">
                  <div class="flex items-center flex-1 gap-5 flex-wrap w-full sm:w-auto">
                    <el-input v-model="form.ai_content.use_cases[key]"
                      :readonly="!isEdit || !hasRealVal(form.handle)"
                      :class="{'cursor-not-allowed': !hasRealVal(form.handle)}"
                      :placeholder="isEdit ? (!hasRealVal(form.handle) ? $t('update_selectAToolFirst') : $t('update_placeholder_useCase') ): ''"
                      class="sm:flex-1 w-full sm:w-auto"></el-input>
                  </div>
                  <div @click="del('use_cases', key)"
                    v-if="isEdit"
                    class="flex-shrink-0 flex items-center justify-center w-full sm:w-9 h-9 border border-gray-1600 rounded text-gray-1000 cursor-pointer btn"
                    :class="{'hover:border-purple-2500 hover:bg-purple-2600 hover:text-purple-1300': hasRealVal(form.handle), 'cursor-not-allowed': !hasRealVal(form.handle)}">
                    <svg-icon className="w-3.5 h-3.5"
                      :isDiv="true"
                      iconName='delete_default'></svg-icon>
                  </div>
                </div>
                <div class="flex items-center gap-3 flex-wrap"
                  v-if="isEdit">
                  <div class="flex items-center flex-1 gap-5 flex-wrap w-full sm:w-auto">
                    <div class="flex-1 h-9 border border-gray-1600 rounded text-gray-1000 cursor-pointer btn"
                      :class="{'hover:text-purple-1300 hover:border-purple-2500 hover:bg-purple-2600': hasRealVal(form.handle)}">
                      <div class="flex items-center justify-center sm:justify-start gap-1.5 px-3 h-full"
                        :class="{'cursor-not-allowed': !hasRealVal(form.handle)}"
                        @click="addItem('use_cases')">
                        <svg-icon className="w-3.5 h-3.5 text-purple-1300"
                          :isDiv="true"
                          iconName='add'></svg-icon>
                        <span class="text-base">{{$t('update_add')}}</span>
                      </div>
                    </div>
                    <div class="flex-1 hidden sm:block sm:w-auto h-9 opacity-0">
                    </div>
                    <div class="flex-1 hidden sm:block sm:w-auto h-9 opacity-0">
                    </div>
                  </div>
                  <div class="flex-shrink-0 hidden sm:block sm:w-9 h-9 opacity-0">
                  </div>
                </div>

                <el-empty :image-size="100"
                  class="py-0 mt-2"
                  v-if="!isEdit && (!hasRealVal(form.ai_content.use_cases) || !Array.isArray(form.ai_content.use_cases) || (Array.isArray(form.ai_content.use_cases) && form.ai_content.use_cases.length === 0))"
                  :description="$t('noResult')"></el-empty>
              </div>
            </el-form-item>

            <el-form-item prop="ai_content.pricing"
              class="mb-8 sm:mb-14">
              <template v-slot:label
                class="w-full">
                <div class="sm:flex items-center justify-between gap-4 flex-1 w-0 flex-wrap space-y-2 sm:space-y-0 mb-3 sm:mb-0 gap-y-3">
                  <div class="sm:flex-1 sm:w-0 flex items-center flex-wrap space-y-2 sm:space-y-0 gap-x-6 gap-y-2 sm:gap-y-3">
                    <span class="text-lg font-semibold text-grayp-1000">
                      {{$t('update_pricingPlan')}}</span>
                    <em class="text-md text-grayp-3400 not-italic"
                      v-if="isEdit">{{$t('update_ifLeftBlank')}}</em>
                  </div>
                  <el-popover placement="top"
                    :trigger="_isMobile() ? 'click':'hover'">
                    <div class="example-box">
                      <img src="@/static/images/example/example06.webp"
                        alt=""
                        srcset="">
                    </div>
                    <div class="inline-flex items-center gap-0.5 cursor-pointer example"
                      slot="reference">
                      <svg-icon className="w-3 h-3"
                        :isDiv="true"
                        iconName='example'></svg-icon>
                      <span class="text-sm text-purple-1300 underline">{{$t('update_example')}}</span>
                    </div>
                  </el-popover>
                </div>
              </template>
              <div class="mt-3 space-y-4 sm:space-y-3">
                <div class="flex items-center gap-3 flex-wrap"
                  v-for="(item, key) in form.ai_content.pricing"
                  :key="key">
                  <div class="flex items-center flex-1 gap-5 flex-wrap w-full sm:w-auto">
                    <el-input v-model="form.ai_content.pricing[key].name"
                      :readonly="!isEdit || !hasRealVal(form.handle)"
                      :class="{'cursor-not-allowed': !hasRealVal(form.handle)}"
                      :placeholder="isEdit ? (!hasRealVal(form.handle) ? $t('update_selectAToolFirst') : $t('update_placeholder_pricingPlanName')) : ''"
                      class="sm:flex-1 w-full sm:w-auto"></el-input>
                    <el-input v-model="form.ai_content.pricing[key].price"
                      :readonly="!isEdit || !hasRealVal(form.handle)"
                      :class="{'cursor-not-allowed': !hasRealVal(form.handle)}"
                      :placeholder="isEdit ? (!hasRealVal(form.handle) ? $t('update_selectAToolFirst') : $t('update_placeholder_pricingPlanPrice')) : ''"
                      class="sm:flex-1 w-full sm:w-auto"></el-input>
                    <el-input v-model="form.ai_content.pricing[key].description"
                      :readonly="!isEdit || !hasRealVal(form.handle)"
                      :class="{'cursor-not-allowed': !hasRealVal(form.handle)}"
                      :placeholder="isEdit ?  (!hasRealVal(form.handle) ? $t('update_selectAToolFirst') : $t('update_placeholder_pricingPlanDescription')) : ''"
                      class="sm:flex-1 w-full sm:w-auto"></el-input>
                  </div>
                  <div @click="del('pricing', key)"
                    v-if="isEdit"
                    class="flex-shrink-0 flex items-center justify-center w-full sm:w-9 h-9 border border-gray-1600 rounded text-gray-1000 cursor-pointer btn"
                    :class="{'hover:border-purple-2500 hover:bg-purple-2600 hover:text-purple-1300': hasRealVal(form.handle), 'cursor-not-allowed': !hasRealVal(form.handle)}">
                    <svg-icon className="w-3.5 h-3.5"
                      :isDiv="true"
                      iconName='delete_default'></svg-icon>
                  </div>
                </div>
                <div class="flex items-center gap-3 flex-wrap"
                  v-if="isEdit">
                  <div class="flex items-center flex-1 gap-5 flex-wrap w-full sm:w-auto">
                    <div class="flex-1 h-9 border border-gray-1600 rounded text-gray-1000 cursor-pointer btn"
                      :class="{'hover:text-purple-1300 hover:border-purple-2500 hover:bg-purple-2600': hasRealVal(form.handle)}">
                      <div class="flex items-center justify-center sm:justify-start gap-1.5 px-3 h-full"
                        :class="{'cursor-not-allowed': !hasRealVal(form.handle)}"
                        @click="addItem('pricing')">
                        <svg-icon className="w-3.5 h-3.5 text-purple-1300"
                          :isDiv="true"
                          iconName='add'></svg-icon>
                        <span class="text-base">{{$t('update_add')}}</span>
                      </div>
                    </div>
                    <div class="flex-1 hidden sm:block sm:w-auto h-9 opacity-0">
                    </div>
                    <div class="flex-1 hidden sm:block sm:w-auto h-9 opacity-0">
                    </div>
                  </div>
                  <div class="flex-shrink-0 hidden sm:block sm:w-9 h-9 opacity-0">
                  </div>
                </div>

                <el-empty :image-size="100"
                  class="py-0 mt-2"
                  v-if="!isEdit && (!hasRealVal(form.ai_content.pricing) || !Array.isArray(form.ai_content.pricing) || (Array.isArray(form.ai_content.pricing) && form.ai_content.pricing.length === 0))"
                  :description="$t('noResult')"></el-empty>
              </div>
            </el-form-item>

            <el-form-item prop="ai_content.faq"
              class="mb-8 sm:mb-12">
              <template v-slot:label
                class="w-full">
                <div class="sm:flex items-center justify-between gap-4 flex-1 w-0 flex-wrap space-y-2 sm:space-y-0 mb-3 sm:mb-0 gap-y-3">
                  <div class="sm:flex-1 sm:w-0 flex items-center flex-wrap space-y-2 sm:space-y-0 gap-x-6 gap-y-2 sm:gap-y-3">
                    <span class="text-lg font-semibold text-grayp-1000">
                      {{$t('update_faq')}}</span>
                    <em class="text-md text-grayp-3400 not-italic"
                      v-if="isEdit">{{$t('update_ifLeftBlank')}}</em>
                  </div>
                  <el-popover placement="top"
                    :trigger="_isMobile() ? 'click':'hover'">
                    <div class="example-box">
                      <img src="@/static/images/example/example07.webp"
                        alt=""
                        srcset="">
                    </div>
                    <div class="inline-flex items-center gap-0.5 cursor-pointer example"
                      slot="reference">
                      <svg-icon className="w-3 h-3"
                        :isDiv="true"
                        iconName='example'></svg-icon>
                      <span class="text-sm text-purple-1300 underline">{{$t('update_example')}}</span>
                    </div>
                  </el-popover>
                </div>
              </template>
              <div class="mt-3 space-y-4 sm:space-y-3">
                <div class="flex items-center gap-3 flex-wrap"
                  v-for="(item, key) in form.ai_content.faq"
                  :key="key">
                  <div class="flex items-center flex-1 gap-5 flex-wrap w-full sm:w-auto">
                    <div class="sm:flex-1 w-full sm:w-auto flex items-center">
                      <span class="flex-shrink-0 w-8 h-9 text-base text-gray-1000 font-semibold leading-9">Q:</span>
                      <el-input v-model="form.ai_content.faq[key].q"
                        :readonly="!isEdit || !hasRealVal(form.handle)"
                        :class="{'cursor-not-allowed': !hasRealVal(form.handle)}"
                        :placeholder="isEdit ? (!hasRealVal(form.handle) ? $t('update_selectAToolFirst') : $t('update_placeholder_question')) : ''"
                        class="flex-1 w-full sm:w-auto"></el-input>
                    </div>
                    <div class="sm:flex-1 w-full sm:w-auto flex items-center">
                      <span class="flex-shrink-0 w-8 h-9 text-base text-gray-1000 font-semibold leading-9">A:</span>
                      <el-input v-model="form.ai_content.faq[key].a"
                        :readonly="!isEdit || !hasRealVal(form.handle)"
                        :class="{'cursor-not-allowed': !hasRealVal(form.handle)}"
                        :placeholder="isEdit ? (!hasRealVal(form.handle) ? $t('update_selectAToolFirst') : $t('update_placeholder_answer') ): ''"
                        class="flex-1 w-full sm:w-auto"></el-input>
                    </div>
                  </div>
                  <div class="flex-shrink-0 flex items-center justify-center w-full sm:w-9 h-9"
                    v-if="isEdit">
                    <span class="flex-shrink-0 w-8 h-9 sm:hidden"></span>
                    <div @click="del('faq', key)"
                      :class="{'cursor-not-allowed': !hasRealVal(form.handle)}"
                      class="flex-1 flex items-center justify-center w-full sm:w-9 h-9 border border-gray-1600 rounded text-gray-1000 cursor-pointer hover:border-purple-2500 hover:bg-purple-2600 hover:text-purple-1300 btn">
                      <svg-icon className="w-3.5 h-3.5"
                        :isDiv="true"
                        iconName='delete_default'></svg-icon>
                    </div>
                  </div>
                </div>
                <div class="flex items-center gap-3 flex-wrap"
                  v-if="isEdit">
                  <div class="flex items-center flex-1 gap-5 flex-wrap w-full sm:w-auto">
                    <div class="sm:flex-1 w-full sm:w-auto flex items-center">
                      <span class="flex-shrink-0 w-8 h-9"
                        v-if="form.ai_content.faq.length > 0"></span>
                      <div class="flex-1 h-9 border border-gray-1600 rounded text-gray-1000 cursor-pointer btn"
                        :class="{'hover:text-purple-1300 hover:border-purple-2500 hover:bg-purple-2600': hasRealVal(form.handle)}">
                        <div class="flex items-center justify-center sm:justify-start gap-1.5 px-3 h-full"
                          :class="{'cursor-not-allowed': !hasRealVal(form.handle)}"
                          @click="addItem('faq')">
                          <svg-icon className="w-3.5 h-3.5 text-purple-1300"
                            :isDiv="true"
                            iconName='add'></svg-icon>
                          <span class="text-base">{{$t('update_add')}}</span>
                        </div>
                      </div>
                    </div>
                    <div class="flex-1 hidden sm:block sm:w-auto h-9 opacity-0">
                    </div>
                  </div>
                  <div class="flex-shrink-0 hidden sm:block sm:w-9 h-9 opacity-0">
                  </div>
                </div>

                <el-empty :image-size="100"
                  class="py-0 mt-2"
                  v-if="!isEdit && (!hasRealVal(form.ai_content.faq) || !Array.isArray(form.ai_content.faq) || (Array.isArray(form.ai_content.faq) && form.ai_content.faq.length === 0))"
                  :description="$t('noResult')"></el-empty>
              </div>
            </el-form-item>
          </div>
          <div class="h-px bg-gray-2000 mb-8"
            v-if="isEdit"></div>

          <div class="sm:pl-8"
            v-if="isEdit">
            <div class="flex items-center gap-3">
              <el-button type="primary"
                :loading="saveLoading"
                :disabled="loading || !hasRealVal(form.handle)"
                class="flex-1 sm:flex-none sm:flex-shrink-0 h-12 text-base"
                @click="toSave()">
                {{ $t('update_confirmAndSubmitUpdates')}}</el-button>
              <el-button @click="toClear()"
                :disabled="loading || !hasRealVal(form.handle)"
                class="inline-flex w-auto h-12 text-base">
                {{ $t('update_clear')}}</el-button>
            </div>
            <h3 class="mt-9 text-base text-gray-1000 font-semibold">
              {{ $t('update_pleaseNote')}}
            </h3>
            <div class="text-base text-gray-1000 space-y-3 mt-5 note-list">
              <p>
                {{ $t('update_onceSubmittedIt')}}
              </p>
              <p>
                {{ $t('update_pleaseContactUs')}}
              </p>
              <p>
                {{ $t('update_ifYouNeedTo')}}
              </p>
            </div>
          </div>

          <div class="grayBg rounded-md text-center hidden group-hover:block pt-36">
            <div class="flex items-center justify-center gap-3">
              <svg-icon className="w-8 h-8 -mt-0.5"
                :isDiv="true"
                iconName='info_white'></svg-icon>
              <span class="text-white text-base font-semibold">
                {{$t('update_selectAToolFirst')}}
              </span>
            </div>
          </div>
        </div>
      </el-form>
    </div>

    <update-category-select :visible="visible"
      :categoriesList="categoriesList"
      :maxHeight="maxHeight"
      :categoriesScore="form.categories_score"
      @handleSelect="handleSelect"
      @handleClose="handleClose"></update-category-select>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'UpdateAiPage',
  head() {
    return {
      htmlAttrs: {
        lang: this.locale,
      },
      meta: [
        {
          hid: 'og:url',
          name: 'og:url',
          content: this.canonicalLink,
        },
      ],
      link: [
        {
          rel: 'canonical',
          href: this.canonicalLink,
        },
      ],
    }
  },
  computed: {
    ...mapState({
      locale: (state) => state.locale,
    }),
  },
  filters: {
    filterCategory: function (val, categoriesList) {
      let label = val
      categoriesList.forEach((item) => {
        item.values.forEach((titem) => {
          if (parseInt(titem.id) === parseInt(val)) {
            label = titem.name
          }
        })
      })
      return label
    },
  },
  watch: {
    'form.handle': {
      handler(val, oldVal) {
        if (this.hasRealVal(val) && val !== oldVal && this.isEdit) {
          let obj = this.toolsList.find((item) => {
            return item.h === val
          })
          if (obj && obj.w) {
            this.website = obj.w
          }

          this.$set(
            this.form,
            'ai_content',
            JSON.parse(JSON.stringify(this.aiObj))
          )
          this.categoriesScore = []

          this.getToolDetail()
        } else if (this.hasRealVal(oldVal) && !this.hasRealVal(val)) {
          this.toClear()
        }
      },
      immediate: true,
      deep: true,
    },
    'form.categories_score': {
      handler(val) {
        if (this.hasRealVal(val) && Array.isArray(val) && val.length > 0) {
          this.$nextTick(() => {
            this.$refs.form.clearValidate(['categories_score'])
          })
        }
      },
      immediate: true,
      deep: true,
    },
  },
  data() {
    return {
      canonicalLink: `https://www.toolify.ai${this.$route.fullPath}`,

      website: null,
      form: {
        order_sn: null,
        handle: null,
        ai_content: {},
        categories_score: [],
      },
      aiObj: {
        website_name: null,
        what_is: null,
        what_is_summary: null,
        how_to_use: null,
        core_features: ['', '', ''],
        use_cases: ['', '', ''],
        faq: [
          {
            a: null,
            q: null,
          },
          {
            a: null,
            q: null,
          },
          {
            a: null,
            q: null,
          },
        ],
        pricing: [
          { name: null, price: null, description: null },
          { name: null, price: null, description: null },
          { name: null, price: null, description: null },
        ],
      },
      rules: {
        handle: [
          {
            required: true,
            message: this.$i18n.t('update_pleaseSelectTheTool'),
            trigger: ['change', 'blur'],
          },
        ],
        categories_score: [
          {
            required: true,
            message: this.$i18n.t('update_pleaseSelectCategory'),
            trigger: ['change', 'blur'],
          },
        ],
      },
      loading: true,
      tLoading: false,
      submitLoading: false,
      toolsList: [],

      visible: false,

      categoriesScore: [],
      categoriesList: [],
      maxHeight: 400,

      isEdit: true,

      saveLoading: false,
    }
  },
  created() {
    this.$set(this.form, 'ai_content', JSON.parse(JSON.stringify(this.aiObj)))
    if (!this.hasRealVal(this.$route.params.handle)) {
      this.$router.replace('/user?tab=updateAi')
    } else {
      this.form.order_sn = this.$route.params.handle
      Promise.all([
        this.getDetail(),
        this.getSearchToolsList(),
        this.toGetCategories(),
      ])
        .then(() => {
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    }
  },
  mounted() {
    let maxHeight = document.documentElement.clientHeight * 0.8 - 136
    this.maxHeight = maxHeight > 600 ? 600 : maxHeight
  },
  methods: {
    async getDetail() {
      try {
        const res = await this.$axiosApi.completionDetail(
          this.$route.params.handle
        )

        if (res && res.code === 200) {
          if (
            this.hasRealVal(res.data.data) &&
            this.hasRealVal(res.data.data.tool)
          ) {
            this.isEdit = false
            let tool = res.data.data.tool
            this.form.handle = tool.handle
            this.website = tool.website

            if (this.hasRealVal(res.data.data.completion_json)) {
              let completion_json = res.data.data.completion_json
              this.form.categories_score = completion_json.categories_score

              let ai_content = completion_json.ai_content
              if (ai_content) {
                for (let key in this.form.ai_content) {
                  if (this.hasRealVal(ai_content[key])) {
                    this.form.ai_content[key] = ai_content[key]
                  }

                  if (this.hasRealVal(ai_content[key])) {
                    this.form.ai_content[key] = ai_content[key]
                  }
                }
              } else {
                this.initAiContent()
              }
            }
            this.$set(
              this.form,
              'ai_content',
              JSON.parse(JSON.stringify(this.form.ai_content))
            )
          } else {
            this.isEdit = true
          }
        } else {
          this.$router.replace('/user?tab=updateAi')
        }
      } catch (error) {
        this.$router.replace('/user?tab=updateAi')
      }
    },
    async getToolDetail() {
      this.tLoading = true
      try {
        const res = await this.$axiosApi.completionToolDetail(this.form.handle)

        this.tLoading = false
        if (res && res.code === 200 && this.hasRealVal(res.data.tool)) {
          let tool = res.data.tool
          this.form.categories_score = tool.categories_score
          if (Array.isArray(this.form.categories_score)) {
            this.form.categories_score.forEach((item) => {
              this.categoriesScore.push(item.id)
              if (
                !this.hasRealVal(item.score) ||
                (typeof item.score === 'number' &&
                  (item.score < 0.1 || item.score > 1))
              ) {
                item.score = 1
              }
            })
          }
          if (tool.ai_content) {
            for (let key in this.form.ai_content) {
              if (
                this.hasRealVal(tool.ai_content[key]) &&
                (!Array.isArray(tool.ai_content[key]) ||
                  (Array.isArray(tool.ai_content[key]) &&
                    tool.ai_content[key].length > 0))
              ) {
                this.form.ai_content[key] = tool.ai_content[key]
              } else if (
                key === 'core_features' ||
                key === 'use_cases' ||
                key === 'faq' ||
                key === 'pricing'
              ) {
                this.form.ai_content[key] = []
                this.addItem(key)
              }
            }
          } else {
            this.initAiContent()
          }
          this.$set(
            this.form,
            'ai_content',
            JSON.parse(JSON.stringify(this.form.ai_content))
          )
        }
      } catch (error) {
        this.tLoading = false
      }
    },
    async toGetCategories() {
      try {
        const res = await this.$axiosApi.getCategoriesGroups()

        if (res && res.code === 200) {
          res.data.groups.forEach((item) => {
            item.values.forEach((titem) => {
              titem.score = 1.0
            })
          })
          this.categoriesList = res.data.groups
        } else if (res.code === 401) {
          this.$router.push({
            name: this.locale === 'en' ? 'login' : 'lang-login',
          })
        } else {
          this.$message.error(res.message)
        }
      } catch (error) {}
    },
    async getSearchToolsList() {
      try {
        let uri
        if (process.browser) {
          uri = window.location.origin
        }
        this.$axios
          .$get(
            `${
              process.env.NODE_ENV === 'development' || !uri ? '' : uri
            }/self-api/v1/tools/catalog.json`
          )
          .then((res) => {
            this.toolsList = res.tool
          })
          .catch((error) => {
            console.error('请求工具失败：', error)
          })
      } catch (error) {}
    },
    del(key, index) {
      if (!this.hasRealVal(this.form.handle)) {
        return false
      }
      if (key === 'categories_score') {
        this.form.categories_score.splice(index, 1)
        this.categoriesScore.splice(index, 1)
      } else {
        this.form.ai_content[key].splice(index, 1)
      }
    },
    addItem(key) {
      if (!this.hasRealVal(this.form.handle)) {
        return false
      }
      switch (key) {
        case 'core_features':
          this.form.ai_content[key].push('')
          break
        case 'use_cases':
          this.form.ai_content[key].push('')
          break
        case 'faq':
          this.form.ai_content[key].push({
            a: null,
            q: null,
          })
          break
        case 'pricing':
          this.form.ai_content[key].push({
            name: null,
            price: null,
            description: null,
          })
          break
        default:
          console.log('出错了')
      }
    },
    toSelectCategory() {
      this.visible = true
    },
    handleSelect(val) {
      if (this.hasRealVal(val) && val.length > 0) {
        this.form.categories_score = val
      } else {
        this.form.categories_score = []
      }
      this.categoriesScore = val
      this.visible = false
    },
    handleClose() {
      this.visible = false
    },
    _isMobile() {
      if (process.browser) {
        let flag = navigator.userAgent.match(
          /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
        )
        return flag
      } else {
        return false
      }
    },
    toSave() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          this.saveLoading = true
          try {
            let form = JSON.parse(JSON.stringify(this.form))

            let core_features = []
            form.ai_content.core_features.forEach((item) => {
              if (this.hasRealVal(item)) {
                core_features.push(item)
              }
            })
            form.ai_content.core_features = core_features

            let use_cases = []
            form.ai_content.use_cases.forEach((item) => {
              if (this.hasRealVal(item)) {
                use_cases.push(item)
              }
            })
            form.ai_content.use_cases = use_cases

            let faq = []
            form.ai_content.faq.forEach((item) => {
              if (this.hasRealVal(item.a) || this.hasRealVal(item.q)) {
                faq.push(item)
              }
            })
            form.ai_content.faq = faq

            let pricing = []
            form.ai_content.pricing.forEach((item) => {
              if (
                this.hasRealVal(item.name) ||
                this.hasRealVal(item.price) ||
                this.hasRealVal(item.description)
              ) {
                pricing.push(item)
              }
            })
            form.ai_content.pricing = pricing

            const res = await this.$axiosApi.completionUpdateMsg(form)

            this.saveLoading = false
            if (res && res.code === 200) {
              this.isEdit = false
              this.$router.push({
                name:
                  this.locale === 'en'
                    ? 'submit-success'
                    : 'lang-submit-success',
              })
            }
          } catch (error) {
            this.saveLoading = false
          }
        } else {
          console.log('error submit!!')

          const dom = document.querySelector('.categories_score')
          if (dom) {
            this.isScrolling = true
            const top = dom.offsetTop

            const targetScrollPosition = Math.max(top - 100, 0)

            window.scrollTo({
              top: targetScrollPosition,
              behavior: 'smooth',
            })
            this.$nextTick(() => {
              this.isScrolling = false
            })
          }

          return false
        }
      })
    },
    toClear() {
      this.$set(this.form, 'ai_content', JSON.parse(JSON.stringify(this.aiObj)))
      this.form.handle = null
      this.form.categories_score = []
      this.website = null
      this.categoriesScore = []
    },
    initAiContent() {
      this.$set(this.form, 'ai_content', JSON.parse(JSON.stringify(this.aiObj)))
    },
  },
}
</script>
<style lang="scss" scoped>
.update-ai-container {
  .update-ai-box {
    .box-shadow {
      box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.12);
      &.disabled {
        position: relative;

        .grayBg {
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          top: 0;
          background: rgba(0, 0, 0, 0.4);
          z-index: 2;
        }
      }
    }
    ::v-deep .el-form {
      .el-form-item {
        .el-form-item__label {
          display: flex;
          flex-wrap: wrap;
          width: 100%;
          line-height: normal;
          font-size: initial;
          padding-bottom: 6px;
        }

        &.is-required:not(.is-no-asterisk) > .el-form-item__label:before,
        &.is-required:not(.is-no-asterisk)
          .el-form-item__label-wrap
          > .el-form-item__label:before {
          height: 28px;
          line-height: 36px;
        }

        .categories_score {
          .el-input__inner {
            text-align: center;
          }
        }
        .sizeMax {
          height: 48px;
          .el-select {
            height: 100%;
            .el-input--medium .el-input__inner {
              height: 48px;
              line-height: 48px;
              font-size: 20px;
            }
          }
        }
      }
    }
    ::v-deep .skeleton {
      *:not(.example) {
        cursor: auto !important;
      }
      .el-input,
      .el-textarea,
      .btn,
      .el-empty {
        position: relative;
        pointer-events: none;
        &::before {
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          content: '';
          background: linear-gradient(
            90deg,
            #f2f2f2 25%,
            #e6e6e6 37%,
            #f2f2f2 63%
          );
          background-size: 400% 100%;
          animation: el-skeleton-loading 1.4s ease infinite;
          display: inline-block;
          height: 100%;
          width: 100%;
        }
        textarea,
        input {
          opacity: 0;
        }
      }
      .btn {
        border: 0 !important;
      }
    }

    .note-list {
      p {
        position: relative;
        padding-left: 15px;
        &::before {
          position: absolute;
          left: 0;
          top: 8px;
          display: block;
          content: '';
          background-color: #191919;
          margin-right: 5px;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          border-radius: 4px;
        }
      }
    }
  }
}
</style>
